<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/libs/iview.min.css">
    <link rel="stylesheet" type="text/css" href="css/libs/webuploader.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <div id="app" style="height: 100%">
        <template>
            <div class="layout">
                <Row type="flex">
                    <!-- 左侧侧边栏 -->
                    <i-col span="2">
                    	<div class="layout-menu-left">
	                        <i-menu @on-select="select" active-name="" theme="dark" width="auto">
	                            <!-- logo -->
	                            <div class="layout-logo-left">
	                                <img src="img/logo.png" width="30" height="30" />
	                            </div>
	                            <!-- 侧边栏 -->
	                            <Menu-item v-for="v in slideBar" :name="v.resCode">
	                                <span v-text="v.resName" class="layout-text"></span>
	                            </Menu-item>
	                        </i-menu>
	                    </div>
                    </i-col>
                    <i-col span="22">
                    	<div class="layout-right">
                        	<!-- 头部 -->
	                        <div class="layout-header">
	                            <i-button @click="logout" id="logout" size="small" type="error">登出</i-button>
	                        	<div style="float: right; margin: 18px 5px 0 0;">
	                        		<span>当前登录用户：</span>
	                        		<span>{{content.personal_manage.name}}</span>
	                        	</div>
	                        </div>
	                        <div class="layout-content">
	                            <div class="layout-content-main fl w100">
	
	                                <!-- 组织管理 -->
	                                <template v-if="active === 'org_manage'">
	                                	<i-input class="search-input" v-model="search.value" placeholder="请输入组织名称" key="org"></i-input>
	                                	<i-button class="fl" style="margin-left: 5px" type="primary" @click="searchImf('searchOrg')">查询</i-button>
	                                    <i-button v-if="isAddOrg" @click="showModal('addOrg','新增组织')" class="fr" type="primary">新增</i-button>
	                                    <i-table style="margin-top: 40px;" :height="content.org_manage.tbody.length>10?'500':''" :columns="content.org_manage.thead" :data="content.org_manage.tbody"></i-table>
	                                </template>
	
	                                <!-- 用户管理 -->
	                                <template v-else-if="active === 'user_manage'">
	                                    <i-input class="search-input" v-model="search.value" placeholder="请输入姓名或账号" key="user"></i-input>
	                                    <i-button class="fl" style="margin-left: 5px" type="primary" @click="searchImf('searchUser')">查询</i-button>
	                                    <i-button @click="showModal('addUser','新增用户')" class="fr" type="primary">新增</i-button>
	                                    <i-table style="margin-top: 40px;" :columns="content.user_manage.thead" :data="content.user_manage.tbody"></i-table>
	                                    <Page @on-change="userPage" class="page-ul" :current="page.current" :total="page.total" :page-size="page.pageSize"></Page>
	                                </template>
	
	                                <!-- 接入管理 -->
	                                <template v-else-if="active === 'access_manage'">
	                                    <i-input class="search-input" v-model="search.value" placeholder="请输入系统名" key="access"></i-input>
	                                    <i-button class="fl" style="margin-left: 5px" type="primary" @click="searchImf('searchAccess')">查询</i-button>
	                                    <i-button @click="showModal('addAccess','新增接入系统')" class="fr" type="primary">新增</i-button>
	                                    <i-table style="margin-top: 40px;" :height="content.access_manage.tbody.length>10?'500':''" :columns="content.access_manage.thead" :data="content.access_manage.tbody"></i-table>
	                                </template>
	
	                                <!-- 角色管理 -->
	                                <template v-if="active === 'role_manage'">
	                                    <i-table :height="content.role_manage.tbody.length>10?'500':''" :columns="content.role_manage.thead" :data="content.role_manage.tbody"></i-table>
	                                </template>
	
	                                <!-- 个人中心 -->
	                                <template v-if="active === 'personal_manage'">
	                                    <i-form :model="content.personal_manage" label-position="right" :label-width="100">
	                                        <Form-item label="姓名">
	                                        	<div class="wid-200 ivu-input-wrapper ivu-input-type">
	                                        		<i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> 
	                                        		<input placeholder="最大不得超过30个字符" maxlength="30" @change="changePersonal" type="text" placeholder="" v-model="content.personal_manage.name" class="ivu-input">
	                                        	</div>
	                                        </Form-item>
	                                        <Form-item label="登录名">
	                                            <i-input class="wid-200" v-model="content.personal_manage.loginId" disabled></i-input>
	                                        </Form-item>
	                                        <Form-item label="是否修改密码">
	                                            <Radio-group v-model="showEditPsw" type="button">
	                                                <Radio label="隐藏密码"></Radio>
	                                                <Radio label="修改密码"></Radio>
	                                            </Radio-group>
	                                        </Form-item>
	                                        <Form-item v-if="showEditPsw === '修改密码'" label="密码">
	                                        	<div class="wid-200 ivu-input-wrapper ivu-input-type">
	                                        		<i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> 
	                                        		<input placeholder="最大不得超过30个字符" maxlength="30" @change="changePersonal" type="password" placeholder="" v-model="content.personal_manage.password" class="ivu-input">
	                                        	</div>
	                                        </Form-item>
	                                        <Form-item v-if="showEditPsw === '修改密码'" label="确认密码">
	                                        	<div class="wid-200 ivu-input-wrapper ivu-input-type">
	                                        		<i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> 
	                                        		<input placeholder="最大不得超过30个字符" maxlength="30" @change="confirmPswChangePersonal" type="password" placeholder="" v-model="content.personal_manage.confirmPassword" class="ivu-input">
	                                        	</div>
	                                        </Form-item>
	                                        <Form-item label="身份证">
	                                        	<div class="wid-200 ivu-input-wrapper ivu-input-type">
	                                        		<i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> 
	                                        		<input placeholder="最大不得超过18个字符" maxlength="18" @change="changePersonal" type="text" placeholder="" v-model="content.personal_manage.idNumber" class="ivu-input">
	                                        	</div>
	                                        </Form-item>
	                                        <Form-item label="邮箱">
	                                        	<div class="wid-200 ivu-input-wrapper ivu-input-type">
	                                        		<i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> 
	                                        		<input placeholder="最大不得超过200个字符" maxlength="200" @change="changePersonal" type="text" placeholder="" v-model="content.personal_manage.email" class="ivu-input">
	                                        	</div>
	                                        </Form-item>
	                                        <Form-item label="电话">
	                                        	<div class="wid-200 ivu-input-wrapper ivu-input-type">
	                                        		<i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> 
	                                        		<input placeholder="最大不得超过30个字符" maxlength="30" @change="changePersonal" type="text" placeholder="" v-model="content.personal_manage.mobilephone" class="ivu-input">
	                                        	</div>
	                                        </Form-item>
	                                        <i-button class="fl" v-show="isEditor" style="margin-left: 5px" type="primary" @click="savePersonal()">保存</i-button>
	                                        <i-button class="fl" v-show="isEditor" style="margin-left: 5px" type="primary" @click="select('personal_manage')">取消</i-button>
	                                    </i-form>
	                                </template>
	
	                                <monitor-list v-if="active === 'monitor'"></monitor-list>
	
	                                <!-- 部门管理 -->
	                                <department-page v-if="active === 'department_manage'">
	                                    <div class="mb10 fl w100" slot="lujing"><a href="javascript:;" @click="select('org_manage')">组织列表</a> <span> > </span> <span>{{orgText}}</span></div>
	                                </department-page>
	                            </div>
	                        </div>
	                        <div class="layout-copy">
	                        </div>
	                    </div>
                    </i-col>
                </Row>
            </div>

            <!--常用确认框-->
            <Modal
                    v-model="confirmModel.show"
                    :title="confirmModel.title"
                    @on-ok="confirmOk(confirmModel.type,confirmModel.param)"
                    @on-cancel="confirmCancel">
                <p>{{confirmModel.text}}</p>
            </Modal>

            <!-- 新增组织modal -->
            <create-new-org v-if="modal.showOrg" :modal="modal" :content="content"></create-new-org>

            <create-new-user v-if="modal.showUser" :modal="modal"></create-new-user>

            <create-new-access v-if="modal.showAccess"></create-new-access>

            <div class="alert-outer">
                <!--警告框-->
                <Alert v-show="normalAlert" banner>提示：{{normalAlert}}</Alert>
                <Alert v-show="successAlert" banner type="success">执行成功：{{successAlert}}</Alert>
                <Alert v-show="warningAlert" banner type="warning">警告：{{warningAlert}}</Alert>
                <Alert v-show="errorAlert" banner type="error">执行失败：{{errorAlert}}</Alert>
            </div>
        </template>
    </div>
    <script src="js/libs/jquery-1.12.1.min.js"></script>
    <script src="js/libs/vue.min.js"></script>
    <script src="js/libs/iview.min.js" charset="utf-8"></script>
    <script src="js/libs/webuploader.min.js"></script>
    <script src="js/libs/iconfont.js"></script>
    <script src="js/commonFunc.js"></script>
    <script src="js/index.js"></script>
    <script src="js/org.js"></script>
    <script src="js/department.js"></script>
    <script src="js/user.js"></script>
    <script src="js/access.js"></script>
    <script src="js/monitor.js"></script>
</body>

</html>
